<template>
  <!-- 输入为空的提示文字提示 -->
  <div class="input-tooltip" :style = "{backgroundImage:`${bgI}`}">
    <i class="iconfont icontishi"></i>
      {{msg}}
    <b :style = "{borderColor:`${bdC}`}"></b>
  </div>
</template>

<script>
// 子组件是不可以修改父组件传递过来的值的,默认值一般写在 style中
const bgImg = {
  orange:"linear-gradient(to right,#ff7901,#f7ad3a)",
};
const bdCor = {
  orange:"transparent transparent #ff7901",
};
export default {
  props:{
    msg:{
      type:String,
      default:'请输入内容哦~',
    },
    // 渐变
    gradient:{
      type:String,
      default:""
    },
    //三角形
    triangle:{
      type:String,
      default:""
    },
  },
  data() {
    return {
      timer: null,
    }
  },
  computed:{
    // 渐变
    bgI() {
      return bgImg[this.gradient];
    },
    //三角形
    bdC() {
      return bdCor[this.triangle];
    }
  }
}
</script>

<style scoped>
.input-tooltip{
  /* width: 164px; */
  padding:0 16px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-image:linear-gradient(to right, #0099ff,#0099ff,#05d5fc,#07edfb);
  border-radius: 4px;
  box-sizing: border-box;
  color: #ffffff;
  font-size: 16px;
  transition: all .3s ease;
  white-space: nowrap;
  position:relative;
}
.input-tooltip i{
  /* color: #E6A23C; */
  font-size: 20px;
  vertical-align: middle;
}
.input-tooltip b{
  width: 0;
  height: 0;
  border: 10px solid;
  border-color: transparent transparent #0096e6;
  position: absolute;
  left: 19px;
  top: -19px;
}
</style>
